<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .demo{
            width: 50px;
            height: 50px;
            border: 1px solid red;
        }
        .red {
            color:red;
        }
    </style>
</head>
<body>
<input type="button" value="big" id="big">
<input type="button" value="base" id="base">
<input type="button" value="remove" id="rm1">
<input type="button" value="remove" id="rm2">
<input type="button" value="切换" id="tog">
<div class="demo">233</div>
<script src="../jquery-1.12.4.js"></script>
<script>
    $(function () {
        var divObj = $(".demo");
       $("#big").click(function () {
          divObj.addClass("big")
       });
        $("#base").click(function () {
            divObj.addClass("base")
        });
        $("#rm1").click(function () {
            divObj.removeClass("big")
        });
        $("#rm2").click(function () {
            divObj.removeClass("base")
        });
        //class切换，有则删除，无则添加
        $("#tog").click(function () {
            divObj.toggleClass("red");
        });
    });
</script>
</body>
</html>